<template>
	<view class="container">
		<view class="line">

		</view>
		<view class="type flexCenter">

			<view class="title">
				类型
			</view>
			<radio-group
				name=""
				class="flexCenter"
			>
				<label class="flexCenter">
					<radio
						:value="0"
						color="red"
						checked=""
					/><text>投诉</text>
				</label>
				<label class="flexCenter">
					<radio
						:value="1"
						color="red"
					/><text>建议</text>
				</label>
			</radio-group>
		</view>
		<view class="line">

		</view>
		<view class="main">
			<textarea
				name=""
				id=""
				placeholder="请输入反馈意见"
				v-model="content"
			></textarea>
			<view class="imgList flexCenter">
				<view
					class="imgItem"
					v-for="item,index in imglist"
					:key="index"
					v-if="imglist"
				>
					<view class="imgBox">
						<image
							class="pic"
							:src="item.fullurl"
							mode=""
						></image>
						<image
							class="del"
							src="@/static/images/mine/del.png"
							@tap="del(index)"
							mode=""
						></image>
					</view>
				</view>
				<view
					class="imgItem"
					v-if="this.imglist.length<9"
				>
					<image
						class="add"
						src="@/static/images/mine/add.png"
						@tap="add"
						mode=""
					></image>
				</view>

			</view>
		</view>

		<button
			class="submit"
			@tap="submit"
		>提交</button>
	</view>
</template>

<script>
import {
	Other,
	Home
} from '@/config/API.js'
import basicConfig from "@/config/basicConfig.js"
export default {
	data () {
		return {
			imglist: [],
			content: ""
		};
	},
	methods: {
		submit () {
			if (!this.content) {
				return uni.showToast({
					title: "请先填写反馈意见",
					icon: "none"
				})
			}
			let arr = [];
			this.imglist.forEach(el => {
				arr.push(el.fullurl)
			})
			arr.join(",")
			Home.suggest({
				content: this.content,
				img: arr
			}).then(res => {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)

			})
		},
		// 删除照片
		del (index) {
			uni.showModal({
				content: "确定删除吗",
				success: (res) => {
					if (res.confirm) {
						this.imglist.splice(index, 1)
					}
				}
			})

		},
		// 添加照片
		add () {
			if (this.imglist.length > 9) {
				return uni.showToast({
					title: "不能超过9张图片",
					icon: "none"
				})
			}
			uni.chooseImage({
				count: 1,
				success: (res) => {
					console.log(res);
					uni.showLoading({
						title: "加载中"
					})
					if (res.tempFiles[0].size > 1024 * 1024 * 5) {
						return uni.showToast({
							title: "图片不能超过5M",
							icon: "none"
						})
					}

					let url = `${basicConfig.baseUrl}api/common/upload`;
					res.tempFiles.forEach(el => {
						console.log(el.path, "path");
						uni.uploadFile({
							url,
							filePath: el.path,
							name: 'file',
							header: {
								'Content-Type': 'multipart/form-data',
								'token': uni.getStorageSync('token'),
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								if (data.code == 1) {
									uni.showToast({
										icon: "none",
										title: '上传成功'
									})
									this.imglist.push(data.data)
								} else {
									uni.showToast({
										icon: "none",
										title: '上传失败'
									})
								}
							},
							fail: (err) => {
								console.log("🚀 changeAvatar ~ err:", err)
							},
							complete: _ => {
								uni.hideLoading()
							}
						});
					})

				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
radio {
	transform: scale(0.6);
}

.line {
	width: 750rpx;
	height: 24rpx;
	background: #f5f5f5;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}

.type {
	padding: 35rpx 0 31rpx 32rpx;

	.title {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #272729;
		margin-right: 24rpx;
	}

	text {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #272729;
		margin-left: 10rpx;
		margin-right: 63rpx;
	}
}

.main {
	padding: 32rpx 32rpx 0;

	textarea {
		width: 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.imgList {
		margin-top: 20rpx;
		flex-wrap: wrap;

		.imgItem {
			margin-bottom: 36rpx;
			width: 25%;

			.imgBox {
				margin: 0 auto;
				width: fit-content;
				position: relative;
			}

			.pic {
				width: 146rpx;
				height: 146rpx;
			}

			.del {
				padding: 20rpx;
				box-sizing: content-box;
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 0;
				top: 0;
				transform: translate(50%, -50%);
			}
		}

		.add {
			margin: 0 auto;
			width: 146rpx;
			height: 146rpx;
		}
	}
}

.submit {
	margin-top: 95rpx;
}
</style>